<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-treeview.min.css"
          th:href="@{static/js/bootstrap/css/bootstrap-treeview.min.css}"
    >
    <script src="static/js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.addtabs.css">
    <script src="static/js/bootstrap/js/bootstrap.addtabs.min.js"></script>
    <link rel="stylesheet" href="static//js/bootstrap/css/bootstrap-table.min.css">
    <script src="static/js/bootstrap/js/bootstrap-table.min.js"></script>
    <script src="static/js/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="static/js/bootstrap/js/bootbox.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="static/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="static/js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="static/js/bootstrap-fileinput/css/fileinput.css">

</head>
<body>

    <input id="commonId_cyt" hidden="hidden" th:value="${commonId.commonId}">
    <input id="commonId_cyt1" hidden="hidden" th:value="${commonId.pictureName}">

    <table id="myDataTable"></table>

</body>

<script>
    $(function (){
        findMaterials_cyt();
    })

    function findMaterials_cyt(){
        var commonId = $("#commonId_cyt").val()
        var userRealName = $("#commonId_cyt1").val()
        $("#myDataTable").bootstrapTable({
            url:"findMaterials_cyt?commonId="+commonId+"&userRealName="+userRealName,
            columns:[
                {field:'materialsUserName',title:'供应商',},
                {field:'materialsType',title:'类目'},
                {field:'materialsName',title:'材料名称'},
                {field:'materialsCount',title:'材料数量'},
                {field:'materialsCount',title:'材料数量'},
                {field:'cz',title:'操作',formatter:function (value,row){
                    return "<input type='button' onclick='confirmFindImg_cyt(\""+row.queryPictureId+"\",\""+row.materialsUserName+"\",\""+row.commonQueryId+"\")' class='btn' value='确定'>"
                }},
            ],

            pagination:true,//是否启用分页
            pageSize:10,//每页的记录行数（*）
            pageList:[10,20,30],//可供选择的每页的行数（*）
            showRefresh: false,//是否显示刷新按钮
            cardView: false,//是否显示详细视图
            sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
            cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        })
    }

    function confirmFindImg_cyt(queryPictureId,userRealName,commonQueryId){
        alert(userRealName)
        $.ajax({
            url:"confirmFindImg_cyt",
            data:{queryPictureId:queryPictureId,userRealName:userRealName,commonQueryId:commonQueryId},
            success:function(data){
                alert("已定图")
            }
        })
    }

</script>

</html>